<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>实时交易趋势</span>
      </div>
      <el-row>
        <div style="width: 100%; height: 500px" id="echart"></div>
        <!-- <div v-else style="text-align: center; line-height: 500px;color: #909399;">暂无数据</div> -->
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import BaseSlot from "@/components/BaseSlot.vue";
import Constant from "@/lib/Constant";
import Echarts from "echarts";

@Component
export default class MyApplication extends Vue {
  @Prop()
  protected data: any = {
    total_qty: [],
    time: []
  };
  protected myChart: any = null;
  @Watch("data", { deep: true, immediate: true })
  private draw() {
    if(!this.data.time.length) {
      if (this.myChart) this.myChart.clear()
      return
    }
    this.$nextTick(() => {
      const element: any = document.getElementById("echart");
      this.myChart = Echarts.init(element);
      this.myChart.setOption({
        xAxis: {
          name: "交易时间",
          type: "category",
          data: this.data.time
        },
        yAxis: {
          type: "value",
          min: 0,
          name: "交易电量（度）"
        },
        tooltip: {
          show: true
        },
        series: [
          {
            data: this.data.total_qty,
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#077BE8"
              }
            }
          }
        ]
      });
      this.myChart.dispatchAction({
        type: "mousemove"
      });
    });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.size24 {
}
// .cardStyle {
//   .el-card {
//     background: rgba(7, 123, 232, 0.05);
//     .fontStyle {
//       color: #077BE8;
//       font-size: 16px;
//       line-height: 36px;
//     }
//     .numberStyle {
//       font-size: 18px;
//     }
//   }
// }
</style>


